<template>
  <!-- 购物车页面组件 -->
  <h2 class="header">我的全部购物车</h2>
  <div class="wrapper">
    <ul class="list">
      <template v-for="item in change.content" :key="item._id" >
        <li class="item" v-show="item.total">
          <h3 class="item__tittle">{{ item.shopName }}</h3>
          <ul>
            <template
              v-for="(innerItem, key, index) in item.productList"
              :key="innerItem._id"
            >
              <li class="item__info" v-if="index <= 1">
                <img :src="innerItem.imgUrl" alt="" class="info__img" />
                <div class="info">
                  <p class="info__tittle">{{ innerItem.name }}</p>
                  <p class="info__price">
                    <span class="price__icon">&yen;</span>
                    <span class="price__text">{{ innerItem.price }}</span>
                    <span class="price__num">x{{ innerItem.count }}</span>
                  </p>
                </div>
                <div class="info__total">
                  <span class="total__icon">&yen;</span>
                  <span class="total__price">{{
                    (innerItem.price * innerItem.count).toFixed(2)
                  }}</span>
                </div>
              </li>
            </template>
          </ul>
          <div class="item__text" v-if="item.show">
            共计{{ item.total }}件
            <div class="item__text__iconfont iconfont">&#xe65e;</div>
          </div>
        </li>
      </template>
    </ul>
  </div>
  <Docker :n="1" />
</template>

<script>
import Docker from "../../components/Docker";
import { computed } from "vue";
import { useStore } from "vuex";
const useChange = () => {
  const store = useStore();
  // 设置change为computed属性
  const change = computed(() => {
    const list = { content: {} };
    list.content = store.state.cartList;
    // 将购物车中被选中的商品的相关信息赋值给list.content
    for (let k in list.content) {
      const products = list.content[k].productList;
      list.content[k].total = 0;
      list.content[k].show = false;
      let n = 0;
      for (let j in products) {
        if (!products[j].check) {
          delete list.content[k].productList[j];
        } else {
          n++;
          list.content[k].total += products[j].count;
        }
      }
      if (n >= 3) {
        // 当商品数量>=3时展示隐藏信息栏
        list.content[k].show = true;
      }
    }
    console.log(list);
    return list;
  });
  return { change };
};
export default {
  name: "CartList",
  components: { Docker },
  setup() {
    const { change } = useChange();
    return {
      change,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
ul,
p {
  padding: 0;
  margin: 0;
  list-style: none;
}
.header {
  background-color: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  height: 0.44rem;
  line-height: 0.44rem;
  text-align: center;
  color: $content-fontcolor;
  font-weight: normal;
  margin: 0;
  font-size: 0.16rem;
  z-index: 999;
}
.wrapper {
  overflow-y: auto;
  background-color: $content-bgcolor;
  padding: 0.16rem 0.18rem 0;
  position: absolute;
  left: 0;
  top: 0.44rem;
  right: 0;
  bottom: 0.5rem;
  .item {
    margin-bottom: 0.16rem;
    background-color: #fff;
    border-radius: 0.04rem;
    padding: 0 0.16rem;
    overflow: hidden;
    &__tittle {
      font-size: 0.16rem;
      height: 0.54rem;
      line-height: 0.54rem;
      margin: 0;
    }
    &__info {
      padding-bottom: 0.16rem;
      height: 0.46rem;
      position: relative;
      .info__img {
        width: 0.46rem;
        height: 0.46rem;
      }
      .info {
        position: absolute;
        left: 0.62rem;
        top: 0;
        &__tittle {
          height: 0.2rem;
          line-height: 0.2rem;
          color: $content-fontcolor;
          margin-bottom: 0.06rem;
        }
        .price__icon,
        .price__text,
        .price__num {
          color: $content-highlightcolor;
          margin-right: 0.04rem;
        }
        .price__icon {
          font-size: 0.12rem;
        }
        .price__text,
        .price__num {
          font-size: 0.14rem;
          line-height: 0.2rem;
        }
        &__total {
          position: absolute;
          right: 0;
          bottom: 0.16rem;
          color: #000;
          font-size: 0.14rem;
          line-height: 0.2rem;
        }
      }
    }
    &__text {
      background-color: $input-bgcolor;
      height: 0.28rem;
      line-height: 0.28rem;
      text-align: center;
      font-size: 0.14rem;
      color: #999;
      margin-bottom: 0.16rem;
      &__iconfont {
        display: inline-block;
        transform: rotate(-90deg);
      }
    }
  }
}
.docker {
  background-color: #fff;
}
</style>